import React from 'react'
import ReactDOM from 'react-dom'

import App from './app.js'

ReactDOM.render(<App />, document.getElementById('root'))

// import './index.css'

// const username = '胖'

// const son = ( <h3>我是son</h3> )

// // const title = React.createElement('h2', {'data-username': 'pang'}, '大家好, 我是胖')
// const title = (
//   <div className="box">
//     <span>你真好</span>
//     <div />
//     哈哈哈 -- 
//     <div>{username}</div>
//     <div>{ 1 }</div>
//     <div>{ 5 > 2 ? '真的' : '假的' }</div>
//     <div>{ son }</div>

//     {/* <div>{ {username: 'pang'} }</div> */}
//     {/* <div>{if(true){}}</div> */}
//   </div>
// )  // 这是在 js中 去 创建html对象 dom对象

// const flag = Math.random()

// const isOk = function() {
//   if (flag > 0.5) {
//     return <h3>你好坏哟--{flag}</h3>
//   }
//   return <h3>我好喜欢--{flag}</h3>
// }

// const isOk = function() {
//   return flag > 0.5 ? <h3>你好坏哟--{flag}</h3> : <h3>我好喜欢--{flag}</h3>
// }

// const isOk = function() {
//   return flag > 0.5 && <h3>你好坏哟--{flag}</h3>  // 短路运算符 
// }

// const title = (
//   <div>
//     <h2>我是条件渲染</h2>
//     <div>{isOk()}</div>
//   </div>
// )

// const arr = [
//   {id: 1, username: 'zs'},
//   {id: 2, username: 'wu'},
//   {id: 3, username: 'zl'}
// ]

// const title = (
//   <div>
//     <h2>我是列表循环</h2>
//     <ul>
//       { arr.map(item=> <li key={item.id}>{item.username}</li>) }
      
//       {/* { arr.map(function(item) {
//         return <li key={item.id}>{item.username}</li>
//       }) } */}
//     </ul>
//   </div>
// )

// const styleObj = {
//   color: 'red',
//   fontSize: '50px',
// }

// const title = (
//   <div>
//     <h2>杨氏处理</h2>
//     <div style={styleObj}>我是你兄弟</div>

//     <div className="container">我是你老师</div>
//   </div>
// )


// ReactDOM.render(title, document.getElementById('root'))

// 1. 可以使用 构造函数 的方式 创建组件
// a. 函数的首字母 必须大写 
// b. 必须自己书写一个返回值
// function App() {
//   return (
//     <div>我是根组件111</div>
//   )
// }

// 2. 可以使用 class 类组件
// a. 必须继承 React.Component 
// b. 必须有 render函数 并且 书写一个返回值
// class App extends React.Component{
//   render() {
//     return (
//       <div>我是类组件创建的根组件</div>
//     )
//   }
// }


// ReactDOM.render(<App></App>, document.getElementById('root'))
